<template>
  <div>
    <el-card>
      <div slot="header">
        <span>工时走势</span>
      </div>
      <div style="width:100%;height:100%;">
        <div v-show="showChart">
          <div
            id="bar"
            style="width:100%;height:250px;">
          </div>
        </div>
        <div v-show="showChart == false">
          {{message}}
        </div>
      </div>
    </el-card>
  </div>
</template>
<script >
import echarts from 'echarts'
import axios from 'axios'
require('echarts/theme/macarons')

export default {
  name: 'monthly-working-histogram',
  props: [
    'year',
    'month',
    'reLoad'
  ],
  data () {
    return {
      chart: '',
      message: '暂无数据',
      showChart: true,
      workDataList: [],
      workTimeList: [],
      overTimeList: [],
      leaveTimeList: [],
      totalTimeList: [],
      isHolidayList: []
    }
  },
  watch: {
    reLoad: function (val, oldVal) {
      this.showChart = true
      this.chart.clear()
      this.chart.showLoading()
      this.getHistogramData()
    }
  },
  methods: {
    getHistogramData () {
      axios({
        method: 'post',
        url: 'api/getmonthlyworkinghistogramdata',
        data: {
          user_token: this.$store.state.token,
          month: this.month,
          year: this.year
        }
      })
      .then((res) => {
        if (res.data.code === '200') {
          this.workTimeList = res.data.data.work_time
          this.overTimeList = res.data.data.over_time
          this.leaveTimeList = res.data.data.leave_time
          this.totalTimeList = res.data.data.total_time
          this.isHolidayList = res.data.data.is_holiday
          this.workDataList = res.data.data.date
          if (this.workDataList === undefined) {
            this.showChart = false
            this.message = '暂无数据'
          } else {
            this.makeBar()
          }
        } else {
          this.$store.commit('openMessage', '请求失败，请重试')
          this.showChart = false
          this.message = '请求失败，请重试'
        }
        this.chart.hideLoading()
      })
      .catch((res) => {
        this.showChart = false
        this.message = '请求失败，请重试'
        this.$store.commit('openMessage', '请求失败，内部错误')
        this.chart.hideLoading()
      })
    },
    makeBar () {
      this.chart.setOption({
        legend: {
          data: ['缺勤', '普通', '加班', '总时间']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.workDataList
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '缺勤',
            type: 'bar',
            data: this.leaveTimeList
          },
          {
            name: '普通',
            type: 'bar',
            stack: '整体',
            data: this.workTimeList
          },
          {
            name: '加班',
            type: 'bar',
            stack: '整体',
            data: this.overTimeList
          },
          {
            name: '总时间',
            type: 'bar',
            data: this.totalTimeList
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      })
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.chart = echarts.init(document.getElementById('bar'), 'macarons')
      this.showChart = true
      this.chart.showLoading()
      this.getHistogramData()
    })
  }
}
</script>